<template>
  <div>
    <van-nav-bar
  title="个人中心"
  left-arrow
  @click-left="onClickLeft"
/>
    <div class="user" @click="editUser">
      <!-- 头像 -->
      <div class="img">
        <van-image round width="100%" height="100%"  :src="user.head_img" />
      </div>
      <van-cell center :title="user.nickname" is-link :label="user.create_date|format('yyyy-MM-dd')" />
    </div>
    <div class="content">
      <van-cell-group :border="false">
        <van-cell title="我的关注" is-link value="关注的用户" @click="focus" />
        <van-cell title="我的跟帖" to="/follow" is-link value="跟帖/回复" />
        <van-cell title="我的收藏" to="/collect" is-link value="文章/视频" />
        <van-cell title="退出登陆" is-link @click="logout" />
      </van-cell-group>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      user:{
        head_img:'',
        create_data:'2019-10-10',
        nickname:''
      }
    }
  },
  created(){
    this.getUser()
  },
  methods: {
    //退出登陆
    logout(){
      localStorage.removeItem('token')
      localStorage.removeItem('userId')
      this.$router.replace('/login')
    },
    //获取当前用户信息
    async getUser(){
      const {data:res} = await this.$http.get('user/'+localStorage.getItem('userId'))
      res.data.head_img = this.$http.defaults.baseURL+res.data.head_img
      this.user = res.data
    },
    editUser(){
      this.$router.push('/edit')
    },
    onClickLeft(){
      this.$router.push('/index')
    },
    focus(){
      this.$router.push('/focus')
    }
  },
  //过滤时间
  filters:{
    format:function (val, arg) {
            function dateFormat(date, format) {
                if (typeof date === "string") {
                    var mts = date.match(/(\/Date\((\d+)\)\/)/);
                    if (mts && mts.length >= 3) {
                        date = parseInt(mts[2]);
                    }
                }
                date = new Date(date);
                if (!date || date.toUTCString() == "Invalid Date") {
                    return "";
                }
                var map = {
                    "M": date.getMonth() + 1, //月份 
                    "d": date.getDate(), //日 
                    "h": date.getHours(), //小时 
                    "m": date.getMinutes(), //分 
                    "s": date.getSeconds(), //秒 
                    "q": Math.floor((date.getMonth() + 3) / 3), //季度 
                    "S": date.getMilliseconds() //毫秒 
                };
                format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                    var v = map[t];
                    if (v !== undefined) {
                        if (all.length > 1) {
                            v = '0' + v;
                            v = v.substr(v.length - 2);
                        }
                        return v;
                    } else if (t === 'y') {
                        return (date.getFullYear() + '').substr(4 - all.length);
                    }
                    return all;
                });
                return format;
            }
            return dateFormat(val, arg)
        }
  }
}
</script>
<style lang="less" scoped>
.user {
  height: 27.778vw;
  border-bottom: 1.389vw solid #eee;
  display: flex;
  align-items: center;
  position: relative;
  .img {
    width: 25vw;
    height: 16.667vw;
    border-radius: 50%;
    background: pink;
    margin-left: 8.333vw;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.van-cell {
  position: static;
}

.van-cell-group .van-cell {
  border-bottom: 1px solid #eee;
}
</style>
